<template>
  <div class="dm_productsDetails_bottom">
    <!-- <div style='display: none'>{{ token }}</div> -->
    <el-tabs
      v-model="activeName"
      @tab-click="tabsChange"
      :style="{ padding: '0 20px', color: '#666' }"
    >
      <el-tab-pane label="商品介绍" name="introduce">
        <div>
          <dl class="dm_productsDetails_bottom__parameter">
            <dd>
              <span
                v-for="item in newParamsList"
                :key="item.key"
                :title="item.value"
                >{{ item.label }}：{{ item.value }}</span
              >
            </dd>
          </dl>
          <el-row>
            <el-col
              :span="24"
              :style="{ textAlign: 'center' }"
              v-for="(item, index) in detailsPic"
              :key="index"
            >
              <img :src="item" :style="{ width: '750px', height: 'auto' }" />
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品评价" name="comment">
        <template v-if="commentList.length">
          <List
            v-for="c in commentList"
            :key="c.id"
            :id="c.id"
            :avatar="c.memberIcon ? c.memberIcon : ''"
            :uname="c.memberNickName"
            :commentTime="c.createTime"
            :content="c.content"
          />
          <!-- likeNum=''
            :isShowBtn="!isDisabled"
                        dislikeNum='' -->
          <!-- :statusClick='statusClick' -->
        </template>
        <div v-else :style="{ textAlign: 'center', padding: '30px 0 10px' }">
          暂无评价
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//import { mapState } from "vuex";
import { getCommentData } from "@/api/product";
export default {
  props: {
    params: {
      type: Object,
      default() {
        return {};
      }
    },
    detailsPic: {
      type: Array,
      default() {
        return [];
      }
    },
    attr: {
      type: Array,
      default() {
        return [];
      }
    },
    attrValue: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      activeName: "introduce",
      paramsList: [],
      //BRAND_LIST: this.$tableDic.BRAND_LIST || {},
      commentList: [],
      isDisabled: false
    };
  },
  updated() {
    if (!this.uname || !this.token) {
      this.isDisabled = true;
    }
  },
  methods: {
    // 赞 /踩 - 操作
    // statusClick(id, type, agreeNum, disagreeNum) {
    //     if(this.isDisabled) return;
    //     this.postUpdateCommentData({
    //         id, type, agreeNum, disagreeNum
    //     });
    // },
    // 监听tab
    tabsChange(tab = {}) {
      this.activeName = tab.name;
      tab.name == "comment" &&
        this.getCurrentCommentData({
          pid: this.params.id
        });
    },
    // 当前商品评价
    async getCurrentCommentData(params = {}) {
      const res = await getCommentData(params.pid);
      try {
        if (res.code === 200) {
          const data = res.data || [];
          this.commentList = data;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 商品参数
    getParams() {
      return this.attr.map(item => {
        return {
          label: item.name,
          key: item.id,
          value: ""
        };
      });
    }
    // 赞 / 踩
    // async postUpdateCommentData(params={}) {
    //     const res = await this.$service.postUpdateCommentData(params);
    //     try {
    //         if (res.data.code === 200) {
    //             this.getCurrentCommentData({
    //                 pid: this.params.id
    //             });
    //         }
    //     } catch (err) {
    //         console.log(err);
    //     }
    // }
  },
  computed: {
    newParamsList() {
      let params = this.attrValue;
      let paramsList = this.getParams();
      for (let i = 0; i < params.length; i++) {
        const a = params[i];
        paramsList.forEach((item, index) => {
          if (a.productAttributeId === item.key) {
            paramsList[index]["value"] = a.value;
          }
        });
      }
      return paramsList.filter(item => item.value.length);
    }
    // ...mapState({
    //   uname: state => state.uname,
    //   token: state => state.token
    // })
  }
};
</script>
